<template>
<div class="modal fade" id="premisesListModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="self-modal-dialog" style="width: 80vw; margin-top:50px; margin-left: 10vw">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" @click="closeModal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h2 class="modal-title text-center">楼盘选取</h2>
			</div>
			<div class="modal-body">
				<div class="main-content">
					<div class="row">
						<div class="col-sm-12 col-md-12">
							<div class="screen-frame clearfix">
								<div class="col-md-6 col-lg-6">
									<div class="form-horizontal">
										<div class="form-group">
											<label class="col-md-3 col-sm-2 control-label">省份市区：</label>
											<div class="col-md-9 col-sm-10">
												<select class="form-control" style="width:32%;float:left" v-model="params.provinceId" v-on:change="getCity()">
													<option value="">全部</option>
													<option v-for="(province,index) in province_list" :value="province.id" :key="index">{{province.name}}</option>
												</select>
												<span style="float:left">-</span>
												<select class="form-control" style="width:32%;float:left" v-model="params.cityId" v-on:change="getArea()">
													<option value="">全部</option>
													<option v-for="(city,index) in city_list" :value="city.id" :key="index">{{city.name}}</option>
												</select>
												<span style="float:left">-</span>
												<select class="form-control" style="width:32%;float:left" v-model="params.areaId">
													<option value="">全部</option>
													<option v-for="(area,index) in area_list" :value="area.id" :key="index">{{area.name}}</option>
												</select>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-4 col-lg-4">
									<div class="form-horizontal">
										<div class="form-group">
											<input type="text" class="form-control" placeholder="楼盘名称" v-model="params.name">
										</div>
									</div>
								</div>
								<div class="col-md-2 col-lg-2">
									<div class="form-horizontal">
										<div class="form-group">
											<button type="submit" class="btn screen-submit" style="position:static;margin-left:10px;background-color: #3399cc;" @click="premsiesList(1)">查询</button>
											<button type="submit" class="btn screen-submit" style="position:static;margin-left:10px;background-color: #e96130;" @click="confirmChecked()">确定</button>
										</div>
									</div>
								</div>
							</div>

							<div class="table-responsive">
								<img src="../../../assets/images/sigh.svg" style="width: 18px;padding-bottom: 3px;">
								<span class="tips">已选中 {{ selectPremisesIds.length }} 个楼盘</span>
								<div style="margin: 5px;">
									<span class="premisesSpan" v-for="(item, index) in selectPremisesNames" :key="index">{{ item }}</span>
								</div>
								<table class="table table-striped table-bordered min-width-790">
									<thead>
										<tr>
											<th width="5%">
												<input type="checkbox" :checked="allCheck" @change="selectChange"/>
											</th>
											<th width="10%">省份</th>
											<th width="10%">城市</th>
											<th width="10%">地区</th>
											<th width="30%">楼盘名称</th>
											<th width="10%">楼盘状态</th>
											<th width="10%">销售状态</th>
											<th width="10%">项目经理</th>
										</tr>
									</thead>
									<tbody ref="table">
										<tr v-for="(row, index) in premisesList" :key="index">
											<td><input type="checkbox" class="singleCheckbox" :value="row.id" v-model="selectPremisesIds" :data-id="row.id" :data-name="row.name"  @change="singleSelectChange"/></td>
											<td>{{row.provinceName}}</td>
											<td>{{row.cityName}}</td>
											<td>{{row.areaName}}</td>
											<td style="text-align: left;">{{row.name}}</td>
											<td>{{row.premisesStatusName}}</td>
											<td>{{row.saleStatusName}}</td>
											<td>{{row.manager}}</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div id="laypage_premisesList"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</template>

<script>
	export default {
		data() {
			return {
				rows: [],
				params: {
					pageNo: 1,
					pageSize: 10,
					name: '',
					provinceId: '',
					cityId: '',
					areaId: '',
					premisesStatus: 1,
					premisesSaleStatus: [0,1,2,3]
				},
				name: '',
				premisesList: [],
				selectPremisesIds: [],
				selectPremisesNames: [],
				province_list: [],
				city_list: [],
				area_list: [],
				allCheck: false
			}
		},
		components: {},
		watch: {},
		mounted() {
			this.provinceList();
			this.premsiesList();
		},
		methods: {
			closeModal () {
				this.params.name = '';
				this.params.provinceId = '';
				this.params.cityId = '';
				this.params.areaId = '';
				this.selectPremisesIds = [];
				this.selectPremisesNames = [];
				$('#premisesListModal').modal('hide');
			},
			initAllCheck(){
				var _self = this;
				let checkDom = _self.$refs.table.getElementsByClassName('singleCheckbox');
				let count = 0;
				for(var ii=0; ii < checkDom.length; ii++){
					if(checkDom[ii].checked){
						count++;
					}
				}
				if(count==10){
					_self.allCheck = true;
				}
			},
			selectChange(e){
				var _self = this;
				var checked = e.target.checked;
				_self.allCheck = checked;
				let checkDom = _self.$refs.table.getElementsByClassName('singleCheckbox');
				// 获取当前页Dom
				// 选中状态: 添加选中值
				// 取消选中: 全部清空历史选中值
				for(var ii=0; ii < checkDom.length; ii++){
					checkDom[ii].checked = checked;
					var premisesId = checkDom[ii].dataset.id;
					var idIndex = _self.selectPremisesIds.indexOf(parseInt(premisesId));
					var premisesName = checkDom[ii].dataset.name;
					var nameIndex = _self.selectPremisesNames.indexOf(premisesName);
					// 选中要过滤掉重复
					if(checked){
						if(idIndex < 0){
							_self.selectPremisesIds.push(parseInt(premisesId));
						}
						if(nameIndex < 0){
							_self.selectPremisesNames.push(premisesName)
						}
					}else{
						// 不选中要清除掉以选中数据
						if(idIndex >=0){
							_self.selectPremisesIds.splice(idIndex, 1);
						}
						if(nameIndex >=0){
							_self.selectPremisesNames.splice(nameIndex, 1);
						}
					}
				}
				_self.selectPremisesIds = Array.from(new Set(_self.selectPremisesIds));
				_self.selectPremisesNames = Array.from(new Set(_self.selectPremisesNames));
			},
			singleSelectChange(e){
				var _self = this;
				var checked = e.target.checked;
				var premisesName = e.target.dataset.name;
				if(!checked){
					_self.allCheck = checked;
					var index = _self.selectPremisesNames.indexOf(premisesName);
					_self.selectPremisesNames.splice(index, 1);
				}else{
					_self.selectPremisesNames.push(premisesName)
				}
				_self.initAllCheck();
			},
			confirmChecked(){
				var _self = this;
				_self.$emit("getPremisesListener", _self.selectPremisesIds)
				_self.closeModal();
			},
			premsiesList (type) {
				var _self = this
				// 任何刷新列表数据的操作,都需要将全选框取消选中
				_self.allCheck = false;
				// 判断点查询按钮时，将当前页和条数设置为默认
				if (type == '1') {
					_self.params.pageNo = 1
					_self.params.pageSize = 10
				}
				var body = {}
				body.params = _self.params
				var url = this.utilHelper.apiUrl + '/api/getCaseMemberPage'
				_self.$http.post(url, body).then((response) => {
					var body = response.body.resData
					if (body.result == '1') {
						var resData = body.data
						var totalPages = resData.totalPages
						var total = resData.total
						var current = resData.pageNumber
						_self.dataTotal = total
						_self.totalPage = totalPages
						_self.premisesList = resData.rows
						for (var i = 0; i < _self.premisesList.length; i++) {
							_self.premisesList[i].index = i + 1
							if (type == 'setOrder' && _self.premisesIds.length > 0) {
								for (var j = 0; j < _self.premisesIds.length; j++) {
									var premisesId = _self.premisesIds[j]
									if (premisesId == _self.premisesList[i].id) {
										_self.premisesList[i]._checked = true
										if (j == 0) {
											_self.currIndex = _self.premisesList[i].index
										}
									}
								}
							}
						}
						if (totalPages >= 0) {
							layui.laypage.render({
							elem: $('#laypage_premisesList'), // 容器。值支持id名、原生dom对象，jquery对象,
							limit: _self.params.pageSize,
							curr: current,
							count: total,
							theme: '#f87242;', // 皮肤
							first: '首页', // 若不显示，设置false即可
							last: '尾页', // 若不显示，设置false即可
							prev: '上一页', // 若不显示，设置false即可
							next: '下一页', // 若不显示，设置false即可
							layout: ['prev', 'page', 'next', 'skip', 'count'],
								jump: function (obj, first) {
									if (!first) {
										_self.params.pageNo = obj.curr
										_self.premsiesList(0)
									}
								}
							})
						} else {
							laypage.render({
							elem: $('#laypage_premisesList'),
							count: 0
							})
						}
					} else {
					}
					_self.$nextTick(() => {
						_self.initAllCheck();
					})
				})
			},
			provinceList: function () {
				var _self = this
				var body = {}
				body.params = {}
				var url = _self.utilHelper.apiUrl + '/api/getProvince.do'
				_self.$http.post(url, body).then((response) => {
					var resData = response.body.resData
					if (resData.result == '1') {
						_self.province_list = resData.areaList
					}
				})
			},
			getCity: function () {
				var _self = this
				var provinceId = _self.params.provinceId
				if (!provinceId) {
					provinceId = 0
				}
				var body = {}
				body.params = {
					areaId: provinceId
				}
				var url = _self.utilHelper.apiUrl + '/api/getCity.do'
				_self.$http.post(url, body).then((response) => {
					var resData = response.body.resData
					if (resData.result == '1' || (resData.areaList && resData.areaList.length > 0)) {
						_self.city_list = resData.areaList
						_self.params.cityId = ''
						_self.params.areaId = ''
						_self.premises_area_list = []
					}
				})
			},
			getArea: function () {
				var _self = this;
				var cityId = _self.params.cityId
				if (!cityId) {
					cityId = 0
				}
				var body = {}
				body.params = {
					areaId: cityId
				}
				var url = _self.utilHelper.apiUrl + '/api/getArea.do'
				_self.$http.post(url, body).then((response) => {
					var resData = response.body.resData
					if (resData.result == '1') {
						_self.params.areaId = ''
						_self.area_list = resData.areaList
					}
				})
			}
		}
	}
</script>
<style>
input[type='checkbox'] {
	width: 15px;
	height: 15px;
}
.premisesSpan{
	border: 1px solid;
    padding: 5px 5px;
	color: #fff;
    background-color: #f90;
    border-radius: 10px;
	margin: 5px 5px;
    display: inline-block;
}
</style>
